From 012a1dc35c69cb51ff15b21f8303787b5299a626 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Sat, 12 Sep 2026 10:58:39 +0200
Subject: improve projects layout on mobile

---
 .../[projectId]/routine/[routineId]/+page.svelte   | 55 ++++++++++++++++++++--
 1 file changed, 51 insertions(+), 4 deletions(-)

(limited to 'src/routes/projects/[projectId]/routine/[routineId]/+page.svelte')

diff --git a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
index e593ad1..74880cb 100644
--- a/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
+++ b/src/routes/projects/[projectId]/routine/[routineId]/+page.svelte
@@ -103,7 +103,7 @@
 					class="form-input desc"
 					name="description"
 					bind:value={description}
-					rows={3}
+					rows={6}
 					placeholder="Pourquoi, comment, quand..."
 					autocomplete="off"
 				></textarea>
@@ -112,13 +112,15 @@
 				<p class="error">Intervalle invalide — ex : 1d, 2w, 3m, 1y</p>
 			{/if}
 			<button
-				class="btn-primary"
+				class="btn-primary btn-save"
 				type="submit"
 				disabled={!name.trim() || frequencyDays === null}
 			>
-				Enregistrer
+				<span class="btn-save-label">Enregistrer</span>
+				<span class="btn-save-check" class:visible={saved} aria-hidden="true"
+					>✓</span
+				>
 			</button>
-			<p class="save-status" class:visible={saved}>✓ Enregistré</p>
 		</form>
 	{/if}
 
@@ -188,6 +190,14 @@
 	{#if data.completions.length === 0}
 		<p class="empty">Aucune réalisation pour l'instant.</p>
 	{/if}
+
+	{#if !data.routine.archived}
+		<footer class="page-footer">
+			<form method="POST" action="?/archive" use:enhance>
+				<button class="btn-archive" type="submit">Archiver la routine</button>
+			</form>
+		</footer>
+	{/if}
 </main>
 
 <style>
@@ -268,4 +278,41 @@
 		font-size: 0.875rem;
 		color: var(--text-secondary);
 	}
+
+	.page-footer {
+		margin-top: 2rem;
+		display: flex;
+		justify-content: center;
+	}
+
+	.btn-archive {
+		border: none;
+		background: transparent;
+		color: var(--text-secondary);
+		font-size: 0.875rem;
+		text-decoration: underline;
+		cursor: pointer;
+	}
+
+	.btn-archive:hover {
+		color: var(--danger);
+	}
+
+	.btn-save {
+		position: relative;
+		padding-right: 2.75rem;
+	}
+
+	.btn-save-check {
+		position: absolute;
+		right: 1rem;
+		top: 50%;
+		transform: translateY(-50%);
+		opacity: 0;
+		transition: opacity 0.2s ease;
+	}
+
+	.btn-save-check.visible {
+		opacity: 1;
+	}
 </style>
-- 
cgit v1.3